const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  // mode: 'development',
  entry: {
    app: ['./src/main.js'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
    // publicPath: './',
    chunkFilename: 'js/[name].js',
  },
  // devtool: 'inline-source-map',

  // devServer: {
  //   contentBase: path.join(__dirname, 'dist'),
  //   compress: true,
  //   port: 9000,
  // },

  module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [
      {
        test: /\.js$/,
        exclude: (file) => /node_modules/.test(file) && !/\.vue\.js/.test(file),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'vue-style-loader', // creates style nodes from JS strings
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS
          },
          {
            loader: 'less-loader', // compiles Less to CSS
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          // 'stylus-loader'
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          /* config.module.rule('images').use('url-loader') */
          {
            loader: 'url-loader',
            options: {
              esModule: false,
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]',
                },
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Webpack Tutorial',
      template: './public/index.html',
      templateParameters: {
        BASE_URL: '/',
      },
    }),
    // new webpack.DefinePlugin({
    //   BASE_URL: '"/"',

    //   // 'process.env': {
    //   //   NODE_ENV: '"development"',
    //   //   BASE_URL: '"/"',
    //   // },
    // }),

    // new CopyPlugin({
    //   patterns: [
    //     {
    //       from: './public',
    //       to: './',
    //       toType: 'dir',
    //       // ignore: [
    //       //   '.DS_Store',
    //       //   {
    //       //     glob: 'index.html',
    //       //     matchBase: false,
    //       //   },
    //       // ],
    //     },
    //   ],
    // }),
  ],
};
